<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :title="title">
      <a-row justify="space-between">
        <a-col v-for="(item, idx) in renderData" :key="idx" :span="6">
          <a-statistic
            :title="item.title"
            :value="item.value"
            show-group-separator
            :value-from="0"
            animation
          >
            <template #prefix>
              <span
                class="statistic-prefix"
                :style="{ background: item.prefix.background }"
              >
                <component
                  :is="item.prefix.icon"
                  :style="{ color: item.prefix.iconColor }"
                />
              </span>
            </template>
          </a-statistic>
        </a-col>
      </a-row>
      <div
        ref="MapArea"
        style="width: 100%; height: 879px; margin: 0; padding: 0"
      ></div>
    </a-card>
  </a-spin>
</template>

<script>
  // import 'echarts/map/js/china'	//导入echart的中国地图插件
  import * as echarts from 'echarts';
  import useLoading from '@/hooks/loading';
  import { toRaw } from 'vue';
  import chinaJson from '../../../../assets/maps/china.json';
  import questionDataSurveyStore from '../../../../store/modules/data-screen';

  const questionData = questionDataSurveyStore();
  export default {
    name: 'MapArea',
    props: {
      currentTab: String,
    },
    data() {
      return {
        title: '地理位置',
        chart: '',
      };
    },
    // watch: {
    //   currentTab() {
    //     this.initEcharts(this.currentTab);
    //   },
    // },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
      });
    },
    methods: {
      initChart(currentTab) {
        console.log('toRaw(questionData.heatmap)');
        console.log(toRaw(questionData.heatmap.data));
        console.log('toRaw(questionData.heatmap)');

        // eslint-disable-next-line no-shadow
        this.chart = echarts.init(this.$refs.MapArea); // 获取到容器的节点，初始化echarts实例

        echarts.registerMap('china', chinaJson);

        const option = {
          // 指定配置项和数据

          tooltip: {
            triggerOn: 'mousemove',
            // formatter: '{b}<br/>{c} '
          },
          visualMap: {
            min: 0,
            max: 10,
            // splitNumber: 10,
            // realtime: false,
            calculable: true,
            center: false,
            // precision: 2,
            // inRange: {
            //   color: ['#9E3362', '#65364E', '#493745'],
            // }, // 设置颜色
            // inRange: {
            //   color: [
            //     '#ffffff',
            //     '#fffbbf',
            //     '#fee090',
            //     '#fdae61',
            //     '#f46d43',
            //     '#d73027',
            //     '#a50026',
            //   ],
            // },
            text: ['High', 'Low'],
          },
          toolbox: {
            show: false,
            left: 'left',
            top: 'top',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },

          series: [
            {
              name: 'CHINA',
              type: 'map',
              map: 'china',
              roam: false,
              geoindex: 0,
              // coordinateSystem: 'geo',
              // normal: {
              //   label: {
              //     show: false
              //   }
              // },
              // emphasis: {
              //   label: {
              //     show: false
              //   }
              // },
              data: toRaw(questionData.heatmap.data),
            },
          ],

          geo: {
            // 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图（省会图）、线集（迁移图）
            map: 'china', // 地图类型
            roam: false, // 是否可以缩放
            // zoom: 1.1,
            // aspectScale: 0.75, //拉伸地图 值为0-1
            label: {
              // 标签组件（地图名）
              normal: {
                // 默认状态
                show: false, // 默认是true 因为后面我们要画省会所以就直接设为false
              },
              // emphasis: {
              //   // 高亮下的状态
              //   show: false,
              // },
            },
            // itemStyle: {
            //   // 区域边形样式
            //   emphasis: {
            //     // color: '#fff',
            //     // areaColor: 'rgba(225, 225, 225, 0.4)',
            //   },
            // },
          },
        };
        this.chart.showLoading();
        this.chart.setOption(option); // 使用刚指定的配置项和数据显示图表。
        this.chart.hideLoading();
      },
      screenAdapter() {
        // 获取自适应大小
        const titleFontSize = (this.$refs.MapArea.offsetWidth / 100) * 3.6;
        // console.log('titleFontSize', titleFontSize);
        // 自适应配置
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize, // 自适应字体大小
            },
          },
          legend: {
            // 图例组件
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2, // 自适应字体大小
            },
          },
        };
        this.chart.setOption(adapterOption);
        // 自适应
        this.chart.resize();
      },
    },
  };
  const { loading } = useLoading(false);
</script>

<style lang="less" scoped>
  .dashboard-container {
    width: 100%;
    height: 100%;
  }
</style>
